"use client"

import { useState, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Image, Dimensions } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import {
    ChevronLeft,
    ChevronRight,
    Calendar as CalendarIcon,
    BookOpen,
    CheckCircle,
    XCircle,
} from "lucide-react-native"
import { theme } from "../../constants/theme"
import { useRouter } from "expo-router"

const { width } = Dimensions.get("window")

// 学习步骤类型
type LearningStep = "学" | "读" | "选" | "拆分" | "拼读" | "拼写"

// 学习步骤状态
type StepStatus = {
    step: number // 0表示未完成，大于0表示完成的次数
    completed: boolean
}

// 单词学习记录
interface WordRecord {
    id: string
    word: string
    color: string
    steps: Record<LearningStep, StepStatus>
}

// 日期学习记录
interface DayRecord {
    date: string
    words: WordRecord[]
}

// 模拟数据 - 多天的学习记录
const MOCK_LEARNING_RECORDS: DayRecord[] = [
    {
        date: "2025-03-13",
        words: [
            {
                id: "1",
                word: "flourish",
                color: "#FFEBCC",
                steps: {
                    学: { step: 1, completed: true },
                    读: { step: 0, completed: false },
                    选: { step: 0, completed: false },
                    拆分: { step: 0, completed: false },
                    拼读: { step: 0, completed: false },
                    拼写: { step: 0, completed: false },
                },
            },
            {
                id: "2",
                word: "blessing",
                color: "#E7F9F1",
                steps: {
                    学: { step: 4, completed: true },
                    读: { step: 0, completed: false },
                    选: { step: 1, completed: true },
                    拆分: { step: 1, completed: true },
                    拼读: { step: 0, completed: false },
                    拼写: { step: 0, completed: false },
                },
            },
            {
                id: "3",
                word: "constitute",
                color: "#F0E7FF",
                steps: {
                    学: { step: 1, completed: true },
                    读: { step: 0, completed: false },
                    选: { step: 0, completed: false },
                    拆分: { step: 0, completed: false },
                    拼读: { step: 0, completed: false },
                    拼写: { step: 0, completed: false },
                },
            },
        ],
    },
    {
        date: "2025-03-12",
        words: [
            {
                id: "4",
                word: "appreciate",
                color: "#FFF4E5",
                steps: {
                    学: { step: 2, completed: true },
                    读: { step: 1, completed: true },
                    选: { step: 1, completed: true },
                    拆分: { step: 0, completed: false },
                    拼读: { step: 0, completed: false },
                    拼写: { step: 0, completed: false },
                },
            },
            {
                id: "5",
                word: "determine",
                color: "#E7F9F1",
                steps: {
                    学: { step: 3, completed: true },
                    读: { step: 2, completed: true },
                    选: { step: 0, completed: false },
                    拆分: { step: 0, completed: false },
                    拼读: { step: 0, completed: false },
                    拼写: { step: 0, completed: false },
                },
            },
        ],
    },
    {
        date: "2025-03-11",
        words: [
            {
                id: "6",
                word: "establish",
                color: "#FFEBCC",
                steps: {
                    学: { step: 5, completed: true },
                    读: { step: 3, completed: true },
                    选: { step: 2, completed: true },
                    拆分: { step: 1, completed: true },
                    拼读: { step: 1, completed: true },
                    拼写: { step: 0, completed: false },
                },
            },
        ],
    },
]

// 学习步骤列表
const LEARNING_STEPS: LearningStep[] = ["学", "读", "选", "拆分", "拼读", "拼写"]

// 步骤图标映射
const STEP_ICONS = {
    学: "🎓",
    读: "🔊",
    选: "✅",
    拆分: "✂️",
    拼读: "🔤",
    拼写: "✏️",
}

// 简单日历组件
const SimpleCalendar = ({
    currentDate,
    markedDates,
    onSelectDate,
    onClose,
}: {
    currentDate: string
    markedDates: string[]
    onSelectDate: (date: string) => void
    onClose: () => void
}) => {
    const [displayedMonth, setDisplayedMonth] = useState<Date>(() => {
        try {
            return new Date(currentDate)
        } catch (e) {
            return new Date()
        }
    })
    const [calendarDays, setCalendarDays] = useState<Array<{ date: Date | null; isCurrentMonth: boolean }>>([])

    // 生成日历数据
    useEffect(() => {
        const year = displayedMonth.getFullYear()
        const month = displayedMonth.getMonth()

        // 获取当月第一天
        const firstDayOfMonth = new Date(year, month, 1)
        // 获取当月最后一天
        const lastDayOfMonth = new Date(year, month + 1, 0)

        // 获取第一天是星期几 (0-6, 0 = 星期日)
        const firstDayWeekday = firstDayOfMonth.getDay()

        // 创建日历数组
        const days: Array<{ date: Date | null; isCurrentMonth: boolean }> = []

        // 添加上个月的日期
        const prevMonthLastDay = new Date(year, month, 0).getDate()
        for (let i = firstDayWeekday - 1; i >= 0; i--) {
            days.push({
                date: new Date(year, month - 1, prevMonthLastDay - i),
                isCurrentMonth: false,
            })
        }

        // 添加当月的日期
        for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
            days.push({
                date: new Date(year, month, i),
                isCurrentMonth: true,
            })
        }

        // 添加下个月的日期以填满6行
        const remainingDays = 42 - days.length // 6行 x 7列 = 42
        for (let i = 1; i <= remainingDays; i++) {
            days.push({
                date: new Date(year, month + 1, i),
                isCurrentMonth: false,
            })
        }

        setCalendarDays(days)
    }, [displayedMonth])

    // 格式化日期为 YYYY-MM-DD
    const formatDateString = (date: Date): string => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, "0")
        const day = String(date.getDate()).padStart(2, "0")
        return `${year}-${month}-${day}`
    }

    // 检查日期是否被标记
    const isDateMarked = (date: Date): boolean => {
        return markedDates.includes(formatDateString(date))
    }

    // 检查日期是否是当前选中日期
    const isSelectedDate = (date: Date): boolean => {
        return formatDateString(date) === currentDate
    }

    // 处理月份变化
    const changeMonth = (increment: number) => {
        const newMonth = new Date(displayedMonth)
        newMonth.setMonth(newMonth.getMonth() + increment)
        setDisplayedMonth(newMonth)
    }

    // 星期标题
    const weekdays = ["日", "一", "二", "三", "四", "五", "六"]

    return (
        <View style={calendarStyles.container}>
            {/* 月份导航 */}
            <View style={calendarStyles.header}>
                <TouchableOpacity onPress={() => changeMonth(-1)} style={calendarStyles.monthNavButton}>
                    <ChevronLeft size={16} color={theme.colors.neutral.darkGray} />
                </TouchableOpacity>

                <Text style={calendarStyles.monthTitle}>
                    {displayedMonth.getFullYear()}年{displayedMonth.getMonth() + 1}月
                </Text>

                <TouchableOpacity onPress={() => changeMonth(1)} style={calendarStyles.monthNavButton}>
                    <ChevronRight size={16} color={theme.colors.neutral.darkGray} />
                </TouchableOpacity>
            </View>

            {/* 星期标题 */}
            <View style={calendarStyles.weekdayRow}>
                {weekdays.map((day, index) => (
                    <View key={index} style={calendarStyles.weekdayCell}>
                        <Text style={calendarStyles.weekdayText}>{day}</Text>
                    </View>
                ))}
            </View>

            {/* 日历网格 */}
            <View style={calendarStyles.daysGrid}>
                {calendarDays.map((dayInfo, index) => {
                    if (!dayInfo.date) return <View key={index} style={calendarStyles.dayCell} />

                    const dateString = formatDateString(dayInfo.date)
                    const isMarked = isDateMarked(dayInfo.date)
                    const isSelected = isSelectedDate(dayInfo.date)

                    return (
                        <TouchableOpacity
                            key={index}
                            style={[
                                calendarStyles.dayCell,
                                !dayInfo.isCurrentMonth && calendarStyles.otherMonthDay,
                                isSelected && calendarStyles.selectedDay,
                                isMarked && calendarStyles.markedDay,
                            ]}
                            onPress={() => {
                                if (isMarked) {
                                    onSelectDate(dateString)
                                }
                            }}
                            disabled={!isMarked}
                        >
                            <Text
                                style={[
                                    calendarStyles.dayText,
                                    !dayInfo.isCurrentMonth && calendarStyles.otherMonthDayText,
                                    isSelected && calendarStyles.selectedDayText,
                                    !isMarked && calendarStyles.noRecordDayText,
                                ]}
                            >
                                {dayInfo.date.getDate()}
                            </Text>

                            {isMarked && <View style={calendarStyles.markerDot} />}
                        </TouchableOpacity>
                    )
                })}
            </View>

            {/* 关闭按钮 */}
            <TouchableOpacity style={calendarStyles.closeButton} onPress={onClose}>
                <LinearGradient
                    colors={theme.colors.primary.gradient}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    style={calendarStyles.closeButtonGradient}
                >
                    <Text style={calendarStyles.closeButtonText}>关闭日历</Text>
                </LinearGradient>
            </TouchableOpacity>
        </View>
    )
}

// 单词学习卡片组件
const WordLearningCard = ({ word, steps }: { word: WordRecord; steps: LearningStep[] }) => {
    // 计算单词完成的步骤数
    const completedSteps = Object.values(word.steps).filter((step) => step.completed).length

    return (
        <View style={[styles.wordCard, { backgroundColor: word.color }]}>
            <View style={styles.wordHeader}>
                <Text style={styles.wordText}>{word.word}</Text>
                <View style={styles.completionBadge}>
                    <Text style={styles.completionText}>
                        {completedSteps}/{steps.length}
                    </Text>
                </View>
            </View>

            <View style={styles.stepsContainer}>
                {steps.map((step) => {
                    const stepStatus = word.steps[step]
                    return (
                        <View key={step} style={styles.stepItem}>
                            <View style={styles.stepIconContainer}>
                                <Text style={styles.stepIcon}>{STEP_ICONS[step]}</Text>
                            </View>
                            <Text style={styles.stepName}>{step}</Text>
                            {stepStatus.completed ? (
                                <View style={styles.completedStep}>
                                    <CheckCircle size={10} color="#FFFFFF" />
                                </View>
                            ) : (
                                <View style={styles.incompleteStep}>
                                    <XCircle size={10} color="#CCCCCC" />
                                </View>
                            )}
                        </View>
                    )
                })}
            </View>
        </View>
    )
}

export default function LearningRecordsScreen() {
    const router = useRouter()
    const [currentDateIndex, setCurrentDateIndex] = useState(0)
    const [showCalendar, setShowCalendar] = useState(false)

    // 当前显示的日期记录
    const currentRecord = MOCK_LEARNING_RECORDS[currentDateIndex] || MOCK_LEARNING_RECORDS[0]

    // 处理前一天
    const handlePreviousDay = () => {
        if (currentDateIndex < MOCK_LEARNING_RECORDS.length - 1) {
            setCurrentDateIndex(currentDateIndex + 1)
        }
    }

    // 处理后一天
    const handleNextDay = () => {
        if (currentDateIndex > 0) {
            setCurrentDateIndex(currentDateIndex - 1)
        }
    }

    // 处理日历选择
    const handleDaySelect = (dateString: string) => {
        const index = MOCK_LEARNING_RECORDS.findIndex((record) => record.date === dateString)
        if (index !== -1) {
            setCurrentDateIndex(index)
        }
        setShowCalendar(false)
    }

    // 获取所有有记录的日期
    const getMarkedDates = () => {
        return MOCK_LEARNING_RECORDS.map((record) => record.date)
    }

    // 格式化日期显示
    const formatDisplayDate = (dateString: string) => {
        try {
            const date = new Date(dateString)
            return date.toLocaleDateString("zh-CN", {
                year: "numeric",
                month: "long",
                day: "numeric",
            })
        } catch (e) {
            return dateString
        }
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={["#F8F9FF", "#FFFFFF"]}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 0.5 }}
                style={styles.gradientBackground}
            >
                {/* 头部 */}
                <View style={styles.header}>
                    <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
                        <ChevronLeft size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>
                    <Text style={styles.headerTitle}>学习记录</Text>
                    <View style={styles.headerRight} />
                </View>

                {/* 日期选择区域 */}
                <View style={styles.dateSelectionArea}>
                    {showCalendar ? (
                        <View style={styles.calendarContainer}>
                            <SimpleCalendar
                                currentDate={currentRecord?.date || ""}
                                markedDates={getMarkedDates()}
                                onSelectDate={handleDaySelect}
                                onClose={() => setShowCalendar(false)}
                            />
                        </View>
                    ) : (
                        <View style={styles.dateNavigationContainer}>
                            <View style={styles.dateNavigation}>
                                <TouchableOpacity
                                    style={[
                                        styles.dateNavButton,
                                        currentDateIndex >= MOCK_LEARNING_RECORDS.length - 1 && styles.dateNavButtonDisabled,
                                    ]}
                                    onPress={handlePreviousDay}
                                    disabled={currentDateIndex >= MOCK_LEARNING_RECORDS.length - 1}
                                >
                                    <ChevronLeft
                                        size={20}
                                        color={
                                            currentDateIndex >= MOCK_LEARNING_RECORDS.length - 1
                                                ? theme.colors.neutral.lightGray
                                                : theme.colors.neutral.darkGray
                                        }
                                    />
                                    <Text
                                        style={[
                                            styles.navButtonText,
                                            currentDateIndex >= MOCK_LEARNING_RECORDS.length - 1 && styles.disabledNavButtonText,
                                        ]}
                                    >
                                        上一日
                                    </Text>
                                </TouchableOpacity>

                                <TouchableOpacity style={styles.dateDisplay} onPress={() => setShowCalendar(true)} activeOpacity={0.7}>
                                    <LinearGradient
                                        colors={["#F0F5FF", "#E6EDFF"]}
                                        start={{ x: 0, y: 0 }}
                                        end={{ x: 1, y: 0 }}
                                        style={styles.dateDisplayGradient}
                                    >
                                        <Text style={styles.dateText}>{currentRecord ? formatDisplayDate(currentRecord.date) : ""}</Text>
                                        <CalendarIcon size={18} color={theme.colors.primary.default} style={styles.calendarIcon} />
                                    </LinearGradient>
                                </TouchableOpacity>

                                <TouchableOpacity
                                    style={[styles.dateNavButton, currentDateIndex <= 0 && styles.dateNavButtonDisabled]}
                                    onPress={handleNextDay}
                                    disabled={currentDateIndex <= 0}
                                >
                                    <Text style={[styles.navButtonText, currentDateIndex <= 0 && styles.disabledNavButtonText]}>
                                        下一日
                                    </Text>
                                    <ChevronRight
                                        size={20}
                                        color={currentDateIndex <= 0 ? theme.colors.neutral.lightGray : theme.colors.neutral.darkGray}
                                    />
                                </TouchableOpacity>
                            </View>

                            {/* 单词总数 */}
                            {currentRecord && (
                                <View style={styles.wordCountContainer}>
                                    <BookOpen size={16} color={theme.colors.primary.default} />
                                    <Text style={styles.wordCount}>今日学习了 {currentRecord.words.length} 个单词</Text>
                                </View>
                            )}
                        </View>
                    )}
                </View>

                {/* 单词列表 */}
                {!showCalendar && currentRecord && currentRecord.words.length > 0 ? (
                    <ScrollView
                        style={styles.wordsList}
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={styles.wordsListContent}
                    >
                        {currentRecord.words.map((wordRecord) => (
                            <View key={wordRecord.id} style={styles.wordCardContainer}>
                                <WordLearningCard word={wordRecord} steps={LEARNING_STEPS} />
                            </View>
                        ))}

                        {/* 底部装饰 */}
                        <View style={styles.bottomDecoration}>
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/3135/3135789.png" }}
                                style={styles.bottomDecorationImage}
                            />
                            <Text style={styles.bottomDecorationText}>继续加油学习吧！</Text>
                        </View>
                    </ScrollView>
                ) : (
                    !showCalendar && (
                        <View style={styles.emptyContainer}>
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/4076/4076478.png" }}
                                style={styles.emptyImage}
                            />
                            <Text style={styles.emptyTitle}>暂无学习记录</Text>
                            <Text style={styles.emptyText}>今天还没有学习记录，快去学习新单词吧！</Text>
                        </View>
                    )
                )}
            </LinearGradient>
        </SafeAreaView>
    )
}

// 日历组件样式
const calendarStyles = StyleSheet.create({
    container: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    header: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.lg,
    },
    monthNavButton: {
        padding: theme.spacing.sm,
        borderRadius: theme.borderRadius.small,
        backgroundColor: "rgba(0, 0, 0, 0.03)",
    },
    monthTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    weekdayRow: {
        flexDirection: "row",
        marginBottom: theme.spacing.md,
        paddingBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.05)",
    },
    weekdayCell: {
        flex: 1,
        alignItems: "center",
        paddingVertical: theme.spacing.xs,
    },
    weekdayText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    daysGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        marginBottom: theme.spacing.lg,
    },
    dayCell: {
        width: "14.28%", // 100% / 7
        aspectRatio: 1,
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        marginVertical: 2,
    },
    dayText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
    },
    otherMonthDay: {
        opacity: 0.4,
    },
    otherMonthDayText: {
        color: theme.colors.neutral.gray,
    },
    noRecordDayText: {
        color: theme.colors.neutral.gray,
    },
    selectedDay: {
        backgroundColor: theme.colors.primary.default,
        borderRadius: 20,
    },
    markedDay: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: 20,
    },
    selectedDayText: {
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.bold,
        fontSize: theme.fontSize.md,
    },
    markerDot: {
        position: "absolute",
        bottom: "15%",
        width: 5,
        height: 5,
        borderRadius: 2.5,
        backgroundColor: theme.colors.primary.default,
    },
    closeButton: {
        borderRadius: theme.borderRadius.medium,
        overflow: "hidden",
    },
    closeButtonGradient: {
        paddingVertical: theme.spacing.md,
        alignItems: "center",
    },
    closeButtonText: {
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
        fontSize: theme.fontSize.md,
    },
})

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        backgroundColor: theme.colors.neutral.background,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    headerRight: {
        width: 40,
    },
    dateSelectionArea: {
        paddingHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
    },
    dateNavigationContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    dateNavigation: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.md,
    },
    dateNavButton: {
        flexDirection: "row",
        alignItems: "center",
        padding: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
    },
    dateNavButtonDisabled: {
        opacity: 0.5,
    },
    navButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        marginHorizontal: theme.spacing.xs,
    },
    disabledNavButtonText: {
        color: theme.colors.neutral.lightGray,
    },
    dateDisplay: {
        flex: 1,
        marginHorizontal: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        overflow: "hidden",
    },
    dateDisplayGradient: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
    },
    dateText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
        textAlign: "center",
    },
    calendarIcon: {
        marginLeft: theme.spacing.sm,
    },
    calendarContainer: {
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
    },
    wordCountContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
    },
    wordCount: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
        marginLeft: theme.spacing.xs,
    },
    wordsList: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
    },
    wordsListContent: {
        paddingBottom: theme.spacing.xxxl,
    },
    wordCardContainer: {
        marginBottom: theme.spacing.md,
    },
    wordCard: {
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 4,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    wordHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: "rgba(0, 0, 0, 0.05)",
        paddingBottom: theme.spacing.xs,
    },
    wordText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    completionBadge: {
        backgroundColor: "rgba(255, 255, 255, 0.7)",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: 12,
    },
    completionText: {
        fontSize: theme.fontSize.xs,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
    },
    stepsContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
        marginTop: theme.spacing.xs,
    },
    stepItem: {
        width: "30%",
        backgroundColor: "rgba(255, 255, 255, 0.7)",
        borderRadius: theme.borderRadius.small,
        padding: theme.spacing.xs,
        marginBottom: theme.spacing.xs,
        alignItems: "center",
    },
    stepIconContainer: {
        marginBottom: 2,
    },
    stepIcon: {
        fontSize: 14,
    },
    stepName: {
        fontSize: 10,
        color: theme.colors.neutral.darkGray,
        marginBottom: 2,
    },
    completedStep: {
        width: 16,
        height: 16,
        borderRadius: 8,
        backgroundColor: theme.colors.secondary.green.default,
        alignItems: "center",
        justifyContent: "center",
    },
    incompleteStep: {
        width: 16,
        height: 16,
        borderRadius: 8,
        backgroundColor: "rgba(255, 255, 255, 0.5)",
        alignItems: "center",
        justifyContent: "center",
        borderWidth: 1,
        borderColor: "#CCCCCC",
    },
    stepNumberText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    emptyContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.colors.neutral.white,
        marginHorizontal: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xxxl,
    },
    emptyImage: {
        width: 120,
        height: 120,
        marginBottom: theme.spacing.lg,
        opacity: 0.7,
    },
    emptyTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginTop: theme.spacing.md,
        textAlign: "center",
    },
    emptyText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        textAlign: "center",
        marginTop: theme.spacing.sm,
        marginBottom: theme.spacing.xl,
    },
    bottomDecoration: {
        alignItems: "center",
        marginTop: theme.spacing.xl,
        marginBottom: theme.spacing.xl,
    },
    bottomDecorationImage: {
        width: 60,
        height: 60,
        marginBottom: theme.spacing.md,
    },
    bottomDecorationText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        fontWeight: theme.fontWeight.medium,
    },
})

